<template>
  <el-container class='elheight'>
    <el-aside class='appTree'>
      <app-tree :tree-data="treeData" v-on:appTreeClick="appTreeClick"></app-tree>
    </el-aside>
    <el-main>
      <el-container>
        <el-header class="dzy-main-header">
          <div class="btn-group-el">
            <btn-group :currentSelectedData="currentSelectedData" @btnClickCallback="btnClickCallback"></btn-group>
          </div>
          <div class="dzy-custom-search-box">
            <div>
              事件名称：<el-input placeholder="请输入内容" v-model="selectForm.eventName" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>
              发生地点：<el-input placeholder="请输入内容" v-model="selectForm.happenAddress" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>
              事件规模：
              <el-select v-model="selectForm.eventScale" clearable placeholder="请选择">
                <el-option v-for="(item,index) in eventOption" :key="index" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </div>
            <div>
              事件分类：
              <el-cascader
                placeholder="请选择"
                :options="eventCategoryOption"
                filterable
                clearable
                :props="dictProps"
                v-model="tempForm.eventCategoryArr">
              </el-cascader>
            </div>
            <div>
              化解方式：
              <el-cascader
                placeholder="请选择"
                :options="resolveModeOption"
                filterable
                clearable
                :props="dictProps"
                v-model="tempForm.resolveModeArr">
              </el-cascader>&nbsp;
            </div>
            <div>
              是否化解成功：
              <el-select v-model="selectForm.isResolved" clearable placeholder="请选择">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </div>
            <div>
              <el-button @click="searchHandleClick" type="primary" icon="el-icon-search">查询</el-button>
            </div>
          </div>
        </el-header>
        <el-main>
          <app-table
            :page-data="historicPageData"
            :table-columns="historicColumns"
            v-on:currentChange="handleCurrentChange"
            v-on:handleCheckedRows="handleCheckedRows"
            v-on:checkTimerShaftHandle="checkTimerShaftHandle"
            v-on:checkFlowHandle="checkFlowHandle">
          </app-table>
          <el-dialog :title="dialogTitle" :visible.sync="isCheckFlowDialogShow" :before-close="cancel" class="custom-dialog-style-imgDialog">
            <div id="imgContainer">
              <img :src="isImgData" />
            </div>
          </el-dialog>
          <el-dialog title="已办事件" :visible.sync="dialogFormVisible" class="custom-dialog_style_twoLine" :before-close="cancel" :close-on-click-modal="false">
            <el-form :model="formData" ref="formData" :disabled="showOnly" label-width="50%">
              <el-form-item label="事件名称：" prop="eventName" label-width="30%">
                <el-input v-model="formData.eventName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="发生日期：" prop="happenDate" label-width="30%">
                <el-date-picker
                  v-model="formData.happenDate"
                  value-format="timestamp"
                  placeholder="选择日期时间"
                  :picker-options="dataPickerBeforeTodayOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="发生地点：" prop="happenAddress" label-width="30%">
                <el-input v-model="formData.happenAddress" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="涉及人数：" prop="numberInvolved" label-width="30%">
                <el-input v-model="formData.numberInvolved" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="事件简述：" label-width="30%" prop="eventOutline" class="custom-textarea-container">
                <el-input type="textarea" v-model="formData.eventOutline"></el-input>
              </el-form-item>
              <el-form-item label="" label-width="30%">
              </el-form-item>
              <el-form-item label="涉及单位：" label-width="30%">
                <el-input v-model="formData.involvedUnit" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="主要当事人证件代码：" prop="cardCode" label-width="30%">
                <el-select v-model="formData.cardCode" clearable placeholder="请选择">
                  <el-option v-for="(item,index) in cardCodeOption" :key="index" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="主要当事人证件号码：" prop="cardNumber" label-width="30%">
                <el-input v-model="formData.cardNumber" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="主要当事人姓名：" prop="partyName" label-width="30%">
                <el-input v-model="formData.partyName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="主要当事人性别：" prop="partyGender" label-width="30%">
                <el-select v-model="formData.partyGender" clearable placeholder="请选择">
                  <el-option v-for="(item,index) in genderOption" :key="index" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="主要当事人民族：" prop="partyNationality" label-width="30%">
                <el-select v-model="formData.partyNationality" clearable filterable placeholder="请选择">
                  <el-option v-for="(item,index) in nationOption" :key="index" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="主要当事人学历：" prop="partyEducationArr" label-width="30%">
                <div class="block">
                  <el-cascader
                    v-model="formData.partyEducationArr"
                    placeholder="请选择"
                    :options="educationOption"
                    filterable
                    :props="dictProps"
                    clearable
                    change-on-select>
                  </el-cascader>
                </div>
              </el-form-item>
              <el-form-item label="主要当事人人员类别：" label-width="30%">
                <div class="block">
                  <el-cascader
                    placeholder="请选择"
                    :options="pTypeOption"
                    filterable
                    clearable
                    :props="dictProps"
                    v-model="formData.partyMemberCategoryArr">
                  </el-cascader>
                </div>
              </el-form-item>
              <el-form-item label="主要当事人居住详址：" prop="partyDetailAddress" label-width="30%">
                <el-input v-model="formData.partyDetailAddress" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="事件规模：" prop="eventScale" label-width="30%">
                <el-select v-model="formData.eventScale" clearable placeholder="请选择">
                  <el-option v-for="(item,index) in eventOption" :key="index" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="事件分类：" prop="eventCategoryArr" label-width="30%">
                <div class="block">
                  <el-cascader
                    placeholder="请选择"
                    :options="eventCategoryOption"
                    filterable
                    clearable
                    :props="dictProps"
                    v-model="formData.eventCategoryArr">
                  </el-cascader>
                </div>
              </el-form-item>
              <el-form-item label="化解方式：" label-width="30%">
                <div class="block">
                  <el-cascader
                    placeholder="请选择"
                    :options="resolveModeOption"
                    filterable
                    clearable
                    :props="dictProps"
                    v-model="formData.resolveModeArr">
                  </el-cascader>
                </div>
              </el-form-item>
              <el-form-item label="化解时限：" label-width="30%">
                <el-date-picker
                  v-model="formData.resolveDeadline"
                  value-format="timestamp"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="化解组织：" label-width="30%">
                <el-input v-model="formData.resolveOrgnization" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="化解责任人姓名：" label-width="30%">
                <el-input v-model="formData.resolvePersonName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="化解责任人联系方式：" label-width="30%">
                <el-input v-model="formData.resolvePersonTel" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="是否化解成功：" prop="isResolved" label-width="30%">
                <el-select v-model="formData.isResolved" clearable placeholder="请选择">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" label-width="30%">
              </el-form-item>
              <el-form-item label="化解情况：" label-width="30%" prop="resolveSituation" class="custom-textarea-container">
                <el-input type="textarea" v-model="formData.resolveSituation" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="" label-width="30%">
              </el-form-item>
              <el-form-item label="考评意见：" label-width="30%" class="custom-textarea-container">
                <el-input type="textarea" v-model="formData.evaluationOpinion"></el-input>
              </el-form-item>
              <el-form-item label="" label-width="30%">
              </el-form-item>
              <el-form-item label="考评日期：" label-width="30%">
                <el-date-picker
                  v-model="formData.evaluationDate"
                  value-format="timestamp"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="" label-width="30%">
              </el-form-item>
              <el-form-item label="选择经纬度：" prop="longitude" class="custom-longla-container">
                <el-input v-model="formData.longitude" :disabled="true" placeholder="经度" ></el-input>
                <el-input v-model="formData.latitude" :disabled="true" placeholder="纬度" ></el-input>
              </el-form-item>
              <el-form-item label="" label-width="49%">
              </el-form-item>
              <el-form-item label="街道/社区/网格：" prop="gridIdArr" label-width="30%">
                <div class="block">
                  <el-cascader
                    placeholder="请选择"
                    :options="treeData"
                    filterable
                    clearable
                    :props="gridIdProps"
                    v-model="formData.gridIdArr">
                  </el-cascader>
                </div>
              </el-form-item>
              <el-form-item label="" label-width="30%" class="custom-textarea-container">
              </el-form-item>
              <el-form-item label="处理意见：" label-width="30%" v-if="isHandletask">
                <el-select v-model="formData.outcome" clearable placeholder="请选择">
                  <el-option v-for="(outcome,index) in outcomeOption" :key="index"
                    :label="outcome.name" :value="outcome.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" label-width="30%" v-if="isHandletask">
              </el-form-item>
              <el-form-item label="批注：" v-if="isHandletask" prop="comment" label-width="30%" class="custom-textarea-container">
                <el-input type="textarea" v-model="formData.comment"></el-input>
              </el-form-item>
            </el-form>
          </el-dialog>
          <el-dialog :title="dialogTitle" :visible.sync="isCheckFlowDialogShow" :before-close="cancel" class="custom-dialog-style-imgDialog">
            <div id="imgContainer">
              <img :src="isImgData" />
            </div>
          </el-dialog>
          <el-dialog title="时间轴" :visible.sync="isTimerShaftDialogShow" :before-close="cancel">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  color="#0bbd87"
                  :timestamp="activity.startTime | formatDate"
                  placement="top">
                  <el-card>
                    <p>任务名称：{{activity.taskName}}</p>
                    <p>处理人：{{activity.assigneeName}}</p>
                    <p v-if="activity.endTime">结束时间：{{activity.endTime | formatDate}}</p>
                    <p style="color:red" v-else>--处理中--</p>
                    <p v-if="activity.endTime">处理意见：{{activity.commentList[0]}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import AppTree from '@/components/common/AppTree'
import AppTable from '@/components/AppTable'
import BtnGroup from '@/components/BtnGroup'
import {getToken} from '@/utils/LocalDataUtil'
import {getUserGridTree} from '@/utils/SessionDataUtil'
import {getDictDataOption} from '@/utils/getDictDataOption'
import {getAllRegion} from '@/utils/region'
import {getHistoricTasks, getContradictoryAdjustmentTimer, getContradictoryAdjustmentPhoto, getContradictoryAdjustmentList} from '@/http/MaoTiaoApi'
export default {
  data () {
    return {
      isImgData: '',
      treeData: [],
      isHandletask: false,
      historicPageData: {},
      dialogTitle: '',
      formData: {},
      showOnly: false,
      tempForm: {},
      historicColumns: [
        { prop: 'taskName', label: '任务名称' },
        { prop: 'desc', label: '事件名称' },
        { prop: 'createTime', label: '创建时间', formatter: this.dateFormatter, width: '140' },
        { prop: 'resolveMode', label: '化解方式', formatter: this.resolveModeFormatter, width: '120' },
        { prop: 'isResolved', label: '是否化解', formatter: this.isResolvedFormatter, width: '80' }
      ],
      selectForm: {},
      isCheckFlowDialogShow: false,
      isTimerShaftDialogShow: false,
      dialogFormVisible: false,
      activities: [],
      currentSelectedData: [],
      eventOption: [],
      dataPickerBeforeTodayOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      cardCodeOption: [],
      genderOption: [],
      nationOption: [],
      educationOption: [],
      pTypeOption: [],
      eventCategoryOption: [],
      resolveModeOption: [],
      gridIdProps: {
        label: 'name',
        value: 'id'
      },
      dictProps: {
        label: 'name',
        value: 'code'
      }
    }
  },
  components: {
    AppTree,
    BtnGroup,
    AppTable
  },
  mounted () {
    this.eventOption = getDictDataOption('事件规模')
    this.eventCategoryOption = getDictDataOption('事件类别')
    this.resolveModeOption = getDictDataOption('化解方式')
    this.getTreeData()
    this.getTableData()
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  },
  methods: {
    dateFormatter (row, column) {
      let prop = 'createTime'
      if (row[prop] && row[prop] === '') return ''
      let resTime = JSON.parse(row[prop])
      return this.$moment(resTime).format('YYYY-MM-DD')
    },
    resolveModeFormatter (row, column) {
      let resolveModeOption = getDictDataOption('化解方式')
      let resolveMode = ''
      for (let i = 0; i < resolveModeOption.length; i++) {
        if (resolveModeOption[i].code === row.resolveMode) {
          resolveMode = resolveModeOption[i].name
          break
        }
      }
      return resolveMode
    },
    isResolvedFormatter (row, column) {
      if (row.isResolved && row.isResolved === '1') {
        return '是'
      } else {
        return '否'
      }
    },
    // 查看流程监控
    checkFlowHandle (data) {
      if (data && data.data) {
        let procsInsId = data.data[data.index].procsInsId
        this.isCheckFlowDialogShow = true
        this.dialogTitle = data.data[data.index].desc
        let token = getToken()
        this.isImgData = getContradictoryAdjustmentPhoto(procsInsId) + '?token=' + token
      }
    },
    // 查看时间轴
    checkTimerShaftHandle (data) {
      if (data && data.data) {
        let timerData = data.data[data.index]
        getContradictoryAdjustmentTimer(timerData.businessId).then(resp => {
          if (resp.code && resp.code === '200') {
            this.isTimerShaftDialogShow = true
            if (resp.data.historicTaskInstanceVOs && resp.data.historicTaskInstanceVOs instanceof Array) {
              this.activities = resp.data.historicTaskInstanceVOs
            }
          } else {
            this.$message({
              type: 'info',
              message: '操作失败，请联系管理员'
            })
            return ''
          }
        })
      } else {
        return ''
      }
    },
    getTreeData () {
      let data = getUserGridTree()
      if (data && data instanceof Array) {
        this.treeData = data
      }
    },
    cancel () {
      this.isCheckFlowDialogShow = false
      this.isTimerShaftDialogShow = false
      this.dialogFormVisible = false
    },
    getTableData (param) {
      getHistoricTasks(param).then(resp => {
        if (resp.code && resp.code === '200') {
          this.historicPageData = resp.data
          this.historicPageData.isCheckTimerShaftHandleInline = true
          this.historicPageData.checkPhotoTitle = '查看流程监控'
          this.historicPageData.checkTimer = '时间轴'
          if (this.historicPageData.items && this.historicPageData.items instanceof Array) {
            this.historicTableData = this.historicPageData.items
          }
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
          return ''
        }
      })
    },
    handleCurrentChange (val) {
      this.selectForm.offset = (val - 1)
      this.getTableData(this.selectForm)
    },
    btnClickCallback (callbackData) {
      if (callbackData.btnType === 'check_flow') {
        if (this.procsInsId && this.procsInsId !== '') {
          this.isCheckFlowDialogShow = true
          let token = getToken()

          this.isImgData = 'http://localhost:8080/contradictoryAdjustment/trace/photo/' + this.procsInsId + '?token=' + token
        } else {
          this.$alert('请选择矛盾事件', '', {
            confirmButtonText: '确定'
          })
          return ''
        }
        return ''
      } else {
        if (callbackData.btnType === 'post') {

        } else {
          this.showOnly = callbackData.sohwOnly
          this.cardCodeOption = getDictDataOption('证件代码')
          this.genderOption = getDictDataOption('性别')
          this.nationOption = getDictDataOption('民族')
          this.educationOption = getDictDataOption('学历')
          this.pTypeOption = getDictDataOption('主要当事人人员类别')
          this.eventOption = getDictDataOption('事件规模')
          this.formData = callbackData.rows[0]
          let businessId = this.formData.businessId
          let m = this
          getContradictoryAdjustmentList(businessId).then(resp => {
            if (resp.code && resp.code === '200') {
              this.dialogFormVisible = true
              m.formData = resp.data
              let partyMemberCategoryArr = m.formData.partyMemberCategory !== '' && m.formData.partyMemberCategory !== null ? m.formData.partyMemberCategory.split(',') : []
              let eventCategoryArr = m.formData.eventCategory !== '' && m.formData.eventCategory !== null ? m.formData.eventCategory.split(',') : []
              let resolveModeArr = m.formData.resolveMode !== '' && m.formData.resolveMode !== null ? m.formData.resolveMode.split(',') : []
              let partyEducationArr = m.formData.partyEducation !== '' && m.formData.partyEducation !== null ? m.formData.partyEducation.split(',') : []
              m.$set(m.formData, 'partyMemberCategoryArr', partyMemberCategoryArr)
              m.$set(m.formData, 'eventCategoryArr', eventCategoryArr)
              m.$set(m.formData, 'resolveModeArr', resolveModeArr)
              m.$set(m.formData, 'partyEducationArr', partyEducationArr)
              let regionData = {}
              regionData.id = m.formData.gridId
              regionData.items = m.treeData
              m.formData.gridIdArr = getAllRegion(regionData)
              // if (m.backlogTableData) {
              //   m.outcomeOption = m.backlogTableData[data.index].options
              // }
            } else {
              m.$message({
                type: 'info',
                message: '数据加载失败'
              })
              return ''
            }
          })
          let regionData = {}
          regionData.id = this.formData.gridId
          regionData.items = this.treeData
          let gridIdArr = getAllRegion(regionData)
          this.$set(this.formData, 'gridIdArr', gridIdArr)
        }
      }
    },
    handleCheckedRows (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.currentSelectedData = rows
      } else {
        this.currentSelectedData = []
      }
    },
    appTreeClick (data) {
      this.selectForm.gridId = data.id
      this.selectForm.offset = 0
      this.getTableData(this.selectForm)
    },
    searchHandleClick () {
      if (this.tempForm.eventCategoryArr && this.tempForm.eventCategoryArr.length > 0) {
        let len = this.tempForm.eventCategoryArr.length - 1
        this.selectForm.eventCategory = this.tempForm.eventCategoryArr[len]
        // delete this.selectForm.eventCategoryArr
      } else {
        this.selectForm.eventCategory = ''
      }
      if (this.tempForm.resolveModeArr && this.tempForm.resolveModeArr.length > 0) {
        let lens = this.tempForm.resolveModeArr.length - 1
        this.selectForm.resolveMode = this.tempForm.resolveModeArr[lens]
        // delete this.selectForm.resolveModeArr
      } else {
        this.selectForm.resolveMode = ''
      }
      this.selectForm.offset = 0
      this.getTableData(this.selectForm)
    }
  }
}
</script>
<style scoped>
.custom-dialog-style-imgDialog .el-dialog{
  width: 82%;
}
.app-table >>> .el-button+.el-button:nth-child(2) {
  margin-left: 0;
  margin-top: 5px
}
</style>
